<template>
  <div id="amapcontainer" class="map-container"> 
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
 securityJsCode: '「申请的安全密钥」',
}
export default {
  name: "amap",
  data: function() {
      return {
          points:[],
          areaData:[],
          clusterIndexSet:{
              province:{
                  minZoom: 2,
                  maxZoom: 5,
              },
              city: {
                  minZoom: 5,
                  maxZoom: 10,
              },
              district: {
                  minZoom: 10,
                  maxZoom: 12,
              },                                
          },
          polygon:null,
          pointStyles:[
            {
                  url: require('../../assets/online.png') , 
                  anchor: [25, 50],
                  size: [50, 50],
                  zIndex: 1,
              },{
                  url: require('../../assets/offline.png') , 
                  anchor: [25, 50],
                  size: [50, 50],
                  zIndex: 1,
              },{
                  url:require('../../assets/abnormal.png') ,  
                  anchor:  [25, 50],
                  size: [50, 50],
                  zIndex: 1,
              },{
                  url:  require('../../assets/onlineStar.png') ,
                  anchor: [15, 15],
                  size: [30, 30],
                  zIndex: 1,
              }
          ],
      };
  },
  mounted(){
    this.initAMap();
  },      
  methods: {
    initAMap(){
      AMapLoader.load({
              key: "申请好的Web端开发者Key", // 申请好的Web端开发者Key，首次调用 load 时必填
              version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
              plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker','AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow','AMap.IndexCluster','AMap.DistrictSearch'], // 需要使用的的插件列表， 
          }).then((AMap) => {
              // 获取到作为地图容器的DOM元素，创建地图实例
              window.map = new AMap.Map("amapcontainer", { //设置地图容器id
                  resizeEnable: true, //是否监控地图容器尺寸变化
                  zoomEnable: true, // 地图是否可缩放，默认值为true
                  dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
                  doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
                  zoom: 11, //初始化地图级别
                  center: [121.59996, 31.197646], // 初始化中心点坐标 上海
                  mapStyle: "amap://styles/dark", // 设置颜色底层
              })
              this.initDistrict();
              this.initPoints();
              this.executeConditionRender();
              //监听地图缩放或者地图平移事件，当缩放或平移时判断层级展示聚合点或海量点
              window.map.on('zoomend', () => { // 监听地图缩放结束后的等级
              this.executeConditionRender();
           });
          window.map.on('moveend', () => { // 监听地图中心点的位置变化
              this.executeConditionRender();
          })
          }).catch(e => {
              console.log(e)
          })
    },
    //调用后端接口初始化省市区数据返回this.areaData;
    /*
    返回的数据格式如下
    areaData:[
       '上海':{
        adcode:'310000',   //高德提供的adcode数据
        center:'121.473667,31.230525',
      ...  //其他隐藏
    },
    ...//其他省市区类似
  ]
  */
    initDistrict(){
       ...  
      return this.areaData
    },
    //调用后端接口初始化省市区数据返回this.points;
    /*
    返回的数据格式如下
    points:[
      {
        lnglat:"121.59996, 31.197646", //经纬度数据
        style:0,  //用于海量点样式数组中使用哪一个数据
      id:'1',  //数据ID
      ...  //其他隐藏
    }，
    ...//其他点位类似
  ]
  */
    initPoints(){
      ...  
      return this.points;
    }
}
}
